<template>
	<view class="container">
		<!-- 标题栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<image src="/static/退出键.png" mode="widthFix" class="back-img"></image>
			</view>
			<view class="title">猫猫专区</view>
			<view class="placeholder"></view>
		</view>

		<!-- 搜索框 -->
		<view class="search-container">
			<u-search placeholder="搜索猫猫专区商品" v-model="searchKeyword" @search="searchProducts" shape="round" :showAction="false"></u-search>
		</view>

		<!-- 顶部图片 - 使用第一张图片作为顶部图片 -->
		<view class="top-image">
			<image src="/static/猫猫专区分类/1.png" mode="widthFix"></image>
		</view>

		<!-- 主要内容 -->
		<view class="content">
			<!-- 第二张图片 -->
			<view class="section">
				<image src="/static/猫猫专区分类/2.png" mode="widthFix" @click="navigateToCategory(1)"></image>
			</view>

			<!-- 第三张图片 -->
			<view class="section">
				<image src="/static/猫猫专区分类/3.png" mode="widthFix" @click="navigateToCategory(2)"></image>
			</view>

			<!-- 第四张图片 -->
			<view class="section">
				<image src="/static/猫猫专区分类/4.png" mode="widthFix" @click="navigateToCategory(3)"></image>
			</view>

			<!-- 第五张图片 -->
			<view class="section">
				<image src="/static/猫猫专区分类/5.png" mode="widthFix" @click="navigateToCategory(4)"></image>
			</view>

			<!-- 第六张图片 -->
			<view class="section">
				<image src="/static/猫猫专区分类/6.png" mode="widthFix" @click="navigateToCategory(5)"></image>
			</view>

			<!-- 第七张图片 -->
			<view class="section">
				<image src="/static/猫猫专区分类/7.png" mode="widthFix" @click="navigateToCategory(6)"></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '', // 搜索关键词
			categoryList: [
				{ id: 1, name: '猫猫主粮', path: '/pages/shop/cat-food' },
				{ id: 2, name: '猫猫罐头', path: '/pages/shop/cat-canned' },
				{ id: 3, name: '猫猫零食', path: '/pages/shop/cat-snacks' },
				{ id: 4, name: '猫猫补充品', path: '/pages/shop/cat-supplement' },
				{ id: 5, name: '猫猫日用品', path: '/pages/shop/cat-daily' },
				{ id: 6, name: '猫猫猫砂', path: '/pages/shop/cat-sand' }
			]
		}
	},
	methods: {
		goBack() {
			uni.navigateBack({
				fail: function () {
					uni.switchTab({
						url: '/pages/category/index',
						fail: function () {
							uni.redirectTo({
								url: '/pages/category/index'
							});
						}
					});
				}
			});
		},
		searchProducts() {
			if (!this.searchKeyword.trim()) {
				uni.showToast({
					title: '请输入搜索关键词',
					icon: 'none'
				});
				return;
			}

			console.log('搜索关键词:', this.searchKeyword);

			// 跳转到搜索结果页面
			uni.navigateTo({
				url: '/pages/product/list?keyword=' + encodeURIComponent(this.searchKeyword) + '&category=cat',
				fail: function (err) {
					console.error('导航到搜索结果页失败:', err);
					uni.showToast({
						title: '搜索功能即将上线',
						icon: 'none'
					});
				}
			});
		},
		navigateToCategory(id) {
			const category = this.categoryList.find(item => item.id === id);
			if (category) {
				uni.navigateTo({
					url: category.path,
					fail: () => {
						uni.switchTab({
							url: category.path,
							fail: () => {
								uni.redirectTo({
									url: category.path
								})
							}
						})
					}
				})
			}
		}
	}
}
</script>

<style lang="scss">
.container {
	padding-bottom: 20rpx;
	background-color: #F8F8F8;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 90rpx;
	padding: 0 30rpx;
	background-color: #FFFFFF;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.back-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.back-img {
	width: 40rpx;
	height: 40rpx;
}

.title {
	font-size: 34rpx;
	font-weight: bold;
	color: #333333;
}

.placeholder {
	width: 60rpx;
}

.search-container {
	padding: 20rpx;
	background-color: #f7f7f7;
	/deep/ .u-search {
		padding: 10rpx 0;
		&__content {
			background-color: #fff;
		}
	}
}

.top-image {
	width: 100%;
	background-color: #FFFFFF;
	padding-bottom: 4rpx;
	margin-top: 0;
}

.top-image image {
	width: 100%;
	display: block;
}

.content {
	padding: 10rpx 20rpx 0 20rpx;
}

.section {
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section image {
	width: 100%;
	display: block;
}
</style>